<template>
  <view class="logincontent">
    <view class="user_coverContent">
      <view class="user_Content">
        <view class="user_title flex-center line">
          <image
            class="login-icon"
            src="@/static/login_mobile_1.png"
            :draggable="false"
          />
          <view class="mobileinput">
            <div class="view-wrapper">
              <input
                maxlength="140"
                enterkeyhint="done"
                pattern="[0-9]*"
                autocomplete="off"
                type="number"
                class="view-input"
                placeholder="请输入手机号"
                v-model="phone"
              />
            </div>
          </view>
        </view>
        <view class="user_title flex-center line">
          <!---->
          <image
            class="login-icon vcodeinput-icon"
            src="@/static/login_code_1.png"
            :draggable="false"
          />
          <view class="vcodeinput">
            <div class="view-wrapper">
              <input
                maxlength="140"
                enterkeyhint="done"
                pattern="[0-9]*"
                autocomplete="off"
                type="number"
                class="view-input"
                placeholder="输入验证码"
                v-model="code"
              />
              <!---->
            </div>
          </view>
          <view
            class="vcode"
            :class="{ disabled: isSendCode }"
            type="default"
            @click="sendCode"
          >
            {{ isSendCode ? `${sendCodeTime}s重新获取` : "获取验证码" }}
          </view>
        </view>
        <view class="bun">
          <view
            class="user_assign"
            type="default"
            style="background: rgb(255, 58, 128)"
            @click="verify"
          >
            开始测肤
          </view>
        </view>
      </view>
    </view>
    <view class="mask flex-center-center" v-show="showTips">
      <view class="cover"></view>
      <view class="helpcontent">
        <view class="flex-center-between">
          <view
            class="helptitle"
            style="border-left: 3px solid rgb(255, 58, 128)"
            >注意事项</view
          >
          <!-- <view class="close">跳过 (5s)</view> -->
        </view>

        <image
          class="tips-image"
          src="@/static/tips_head.png"
          :draggable="false"
        />
        <view class="tips" style="color: rgb(255, 58, 128)"
          >—— 满足以下要求要求结果更准哦 ——</view
        >
        <view class="tipsicon flex-center-between">
          <view class="tipsitem">
            <image src="@/static/tips_hair_1.png" :draggable="false" />
            <view>拨拢发长</view>
          </view>
          <view class="tipsitem">
            <image src="@/static/tips_moshubang_1.png" :draggable="false" />
            <view>关闭美颜</view>
          </view>
          <view class="tipsitem">
            <image src="@/static/tips_glass_1.png" :draggable="false" />
            <view>摘掉眼镜</view>
          </view>
          <view class="tipsitem">
            <image src="@/static/tips_sunny_1.png" :draggable="false" />
            <view>光线充足</view>
          </view>
        </view>
        <div class="btn btnpromos" @click="onSubmit">我知道了</div>
      </view>
    </view>
  </view>
</template>
<script>
import { getCerificationCodeByPhone } from "@/api";
import { PHONE_REG } from "@/utils/reg.js";
export default {
  data() {
    return {
      phone: "",
      code: "",
      isSendCode: false,
      sendCodeTime: 59,
      sendCodeTimeData: null,
      showTips: false,
    };
  },
  methods: {
    sendCode() {
      if (!this.phone) {
        return uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
      }
      if (!PHONE_REG.test(this.phone)) {
        return uni.showToast({ title: "请输入正确的手机号", icon: "none" });
      }
      if (this.isSendCode) return;
      this.sendCodeTimeData && clearInterval(this.sendCodeTimeData);
      getCerificationCodeByPhone(this.phone).then((res) => {
        this.isSendCode = true;
        this.sendCodeTime = 59;
        this.sendCodeTimeData = setInterval(() => {
          if (this.sendCodeTime < 2) {
            clearInterval(this.sendCodeTimeData);
            this.isSendCode = false;
          } else {
            this.sendCodeTime -= 1;
          }
        }, 1000);
      });
    },
    verify() {
      if (!this.phone) {
        return uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
      }
      if (!PHONE_REG.test(this.phone)) {
        return uni.showToast({ title: "请输入正确的手机号", icon: "none" });
      }
      if (!this.code) {
        return uni.showToast({
          title: "请输入验证码",
          icon: "none",
        });
      }
      this.showTips = true;
    },
    onSubmit() {
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"], //original
        // sourceType: ['album'],//'camera',
        success: (chooseImage_res) => {
          uni.setStorageSync("submit-data", {
            phone: this.phone,
            code: this.code,
            tempPath: chooseImage_res.tempFilePaths[0],
          });
          uni.navigateTo({
            url: `/pages/loading/loading`,
          });
          // uni.showLoading({
          //   title: "正在上传图片...",
          // });
          // console.log(chooseImage_res.tempFilePaths[0], "chooseImage_res");
          // this.updateImg(chooseImage_res.tempFilePaths[0]);
        },
        fail: (err) => {},
      });
    },
    updateImg(imgPath) {
      uni.uploadFile({
        url: BASE_URL + "/pushimg",
        filePath: imgPath,
        name: "file",
        success: (res) => {
          if (!res.data) {
            this.showTips = false;
            uni.hideLoading();
            return uni.showToast("服务器错误");
          }
          const data = JSON.parse(res.data);
          if (data.code !== "000000") {
            this.showTips = false;
            uni.hideLoading();
            return uni.showToast(data.msg);
          }
          uni.setStorageSync("submit-data", {
            phone: this.phone,
            code: this.code,
            url: data.data,
          });
          uni.navigateTo({
            url: `/pages/loading/loading`,
          });
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.logincontent {
  background: #fff;
  height: 100%;
}
body {
  background: #fff;
}
.user_Content {
  padding: 150rpx 0 0;
  width: 600rpx;
  margin: 0 auto;
  .user_title {
    margin-bottom: 15rpx;
    border-bottom: 1rpx solid #ccc;
    padding: 20rpx 0;
  }
}
.view-wrapper {
  margin-left: 30rpx;
}
.login-icon {
  width: 50rpx;
  height: 55rpx;
}
.vcodeinput-icon {
  height: 50rpx;
}
.vcodeinput {
  width: 300rpx;
}
.vcode,
.user_assign {
  font-size: 28rpx;
  color: #fff;
}
.vcode {
  border-radius: 15rpx;
  line-height: 70rpx;
  background: rgb(255, 58, 128);
  width: 210rpx;
  text-align: center;
  &.disabled {
    background: #ccc;
    color: #999;
  }
}
.user_assign {
  margin-top: 50rpx;
  width: 500rpx;
  padding: 20rpx;
  border-radius: 50rpx;
  margin: 100rpx auto 0;
  text-align: center;
  font-size: 32rpx;
}
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.cover {
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.helpcontent {
  position: relative;
  width: 600rpx;
  background: #fff;
  border-radius: 10rpx;
  padding: 35rpx;
  font-size: 26rpx;
  .helptitle {
    padding-left: 20rpx;
    font-weight: bold;
    font-size: 30rpx;
  }
  image {
    width: 84rpx;
    height: 84rpx;
  }
  .tips-image {
    width: 300rpx;
    height: 350rpx;
    margin: 0 auto;
    display: block;
    margin-top: 50rpx;
  }
  .tips {
    color: rgb(255, 58, 128);
    text-align: center;
    margin-top: 50rpx;
  }
  .tipsicon {
    color: #777;
    margin-top: 50rpx;
    .tipsitem {
      line-height: 1.8;
    }
  }
  .btnpromos {
    line-height: 88rpx;
    background: rgb(255, 58, 128);
    border-radius: 50rpx;
    text-align: center;
    color: #fff;
    width: 260rpx;
    font-size: 34rpx;
    margin: 50rpx auto 0;
    &:active {
      background: rgb(252, 84, 143);
    }
  }
}
</style>
